import styled from 'styled-components'
import logo from '@/assets/logo.svg'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'

const Wrapper = styled.div`
  background-color: #35495e;
  height: 100%;
  .login-box {
    width: 400px;
    height: 250px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    .form-login {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
    }
  }

  .form-control {
    flex: 1;
  }

  .avatar-box {
    position: absolute;
    width: 100%;
    top: -65px;
    left: 0;
    .avatar {
      width: 120px;
      height: 120px;
      border-radius: 50% !important;
      box-shadow: 0 0 6px #efefef;
    }
  }

  .col-form-label {
    text-align: end;
  }
`

export default function Login() {
  // 导航跳转
  const navigate = useNavigate()
  // 用户信息
  const [info, setInfo] = useState({
    username: 'admin',
    password: '123456'
  })

  // 登录
  const login = () => {
    if (info.username === 'admin' && info.password === '123456') {
      // 登录成功，存储 token，并跳转到后台主页
      localStorage.setItem('token', 'Bearer xxx')
      navigate('/', { replace: true })
    } else {
      localStorage.removeItem('token')
      alert('登录失败！')
    }
  }

  return (
    <Wrapper>
      <div className="login-box">
        {/* 头像区域 */}
        <div className="text-center avatar-box">
          <img src={logo} className="img-thumbnail avatar" alt="" />
        </div>

        {/* 表单区域 */}
        <div className="form-login p-4">
          {/* 登录名称 */}
          <div className="row mb-3">
            <label htmlFor="username" className="col-sm-3 col-form-label">
              登录名称
            </label>
            <div className="col-sm-9">
              <input
                type="text"
                className="form-control ml-2"
                id="username"
                placeholder="请输入登录名称"
                autoComplete="off"
                value={info.username}
                onChange={e => setInfo({ ...info, username: e.target.value.trim() })}
              />
            </div>
          </div>
          {/* 登录密码 */}
          <div className="row mb-3">
            <label htmlFor="password" className="col-sm-3 col-form-label">
              登录密码
            </label>
            <div className="col-sm-9">
              <input
                type="password"
                className="form-control ml-2"
                id="password"
                placeholder="请输入登录密码"
                value={info.password}
                onChange={e => setInfo({ ...info, password: e.target.value.trim() })}
              />
            </div>
          </div>
          {/* 登录和重置按钮 */}
          <div className="form-group form-inline d-flex justify-content-end">
            <button type="button" className="btn btn-secondary me-2">
              重置
            </button>
            <button type="button" className="btn btn-primary" onClick={login}>
              登录
            </button>
          </div>
        </div>
      </div>
    </Wrapper>
  )
}
